<template>
	<!-- 用户页面 -->
	<div>
		<!-- 面包屑导航区 -->
		<myBreadcrumb :breadcrumbData="this.breadcrumbData"></myBreadcrumb>
		<!-- 卡片视图区域 -->
		<el-card shadow="always" :body-style="{ padding: '10px' }">
			<div class="mask">
				<el-row :gutter="20">
					<el-col :span="8">
						<mySearch
							:searchType="this.searchType"
							:handleSearchSelectInputChange="
								this.handleSearchSelectInputChange
							"
							:searchTypeOptions="this.searchTypeOptions"
							:searchTypePlaceholder="this.searchTypePlaceholder"
							:searchInputKey="this.searchInputKey"
							:searchInputChange="this.searchInputChange"
						></mySearch>
					</el-col>
				</el-row>
				<el-container style="height: 100%">
					<el-table
						:data="userList"
						stripe
						sortable
						style="width: 100%"
					>
						<el-table-column
							prop="isAdmin"
							label="admin"
							width="90"
							sortable
						>
							<template slot-scope="scope">
								<i
									style="color: red"
									v-if="scope.row.admin == 0"
									class="el-icon-error"
								></i>
								<i
									style="color: green"
									v-if="scope.row.admin == 1"
									class="el-icon-s-check"
								></i>
							</template>
						</el-table-column>
						<el-table-column
							prop="username"
							label="用户姓名"
							width="180"
							sortable
						>
						</el-table-column>
						<el-table-column
							prop="college"
							label="学院单位"
							sortable
						>
						</el-table-column>
						<el-table-column prop="position" label="职位" sortable>
						</el-table-column>
						<el-table-column
							prop="achivevementNum"
							label="业绩数量"
							width="120"
							sortable
						>
						</el-table-column>
						<!-- 操作 -->
						<el-table-column class="control" label="操作">
							<template slot-scope="scope">
								<el-tooltip
									class="item"
									effect="dark"
									content="用户信息修改"
									placement="top"
								>
									<el-button
										type="primary"
										icon="el-icon-s-tools"
										circle
										@click="
											handleControlBtnClick(scope.row)
										"
									></el-button>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<el-footer height="60px">
						<myPagination
							:sizeChange="sizeChange"
							:currentChange="currentChange"
							:queryInfo="queryInfo"
							:total="total"
						></myPagination>
					</el-footer>
				</el-container>
			</div>
		</el-card>

		<!-- 操作弹窗 -->
		<el-dialog
			title="用户列表信息修改"
			:visible.sync="userMsgEditDialogVisible"
			width="30%"
			center
		>
			<span>
				<el-form
					:model="userMsgEditForm"
					:rules="userMsgEditFormRules"
					ref="userMsgEditFormRef"
					label-width="100px"
				>
					<el-form-item label="用户姓名 :" prop="username">
						<el-input v-model="userMsgEditForm.username"></el-input>
					</el-form-item>
					<el-form-item label="用户账号" prop="account">
						<el-input v-model="userMsgEditForm.account"></el-input>
					</el-form-item>
					<el-form-item label="用户密码" prop="password">
						<el-input v-model="userMsgEditForm.password"></el-input>
					</el-form-item>
					<el-form-item label="活动区域 :" prop="region">
						<el-select
							v-model="userMsgEditForm.college"
							placeholder="请选择学院单位 :"
						>
							<el-option
								v-for="item in collegeList"
								:key="item.value"
								:label="item.label"
								:value="item.label"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="用户职位 :" prop="position">
						<el-input v-model="userMsgEditForm.position"></el-input>
					</el-form-item>
					<el-form-item label="用户身份 :" prop="admin">
						<el-switch
							v-model="userMsgEditForm.admin"
							active-text="管理者"
							inactive-text="普通用户"
						>
						</el-switch>
					</el-form-item>
				</el-form>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="userMsgEditDialogVisible = false"
					>取 消</el-button
				>
				<el-button type="primary" @click="handleUserMsgEditFormConfirm"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import myBreadcrumb from '../../components/myBreadcrumb.vue';
import myPagination from '../../components/myPagination.vue';
import mySearch from '../../components/mySearch.vue';

import { mapState } from 'vuex';
export default {
	name: 'myUsersList',
	components: {
		myBreadcrumb,
		myPagination,
		mySearch,
	},
	data() {
		return {
			// 获取用户列表的参数对象
			queryInfo: {
				query: '',
				// 当前的页数
				pagenum: 1,
				// 当前每页显示多少条数据
				pagesize: 10,
			},
			userList: [],
			// 总人数
			total: 0,
			breadcrumbData: ['用户管理', '用户列表'],
			userList: [],
			// 搜索placeholder
			searchType: 'username',
			searchInputKey: '',
			searchTypePlaceholder: '搜索用户姓名',
			searchTypeOptions: [
				{
					value: 'username',
					label: '用户姓名',
				},
				{
					value: 'college',
					label: '学院单位',
				},
				{
					value: 'position',
					label: '职位',
				},
			],
			// 操作
			userMsgEditDialogVisible: false,
			userMsgEditForm: {},
			userMsgEditFormRules: {
				username: [
					{
						required: true,
						message: '请输入用户姓名',
						trigger: 'blur',
					},
				],
				position: [
					{
						required: true,
						message: '请输入用户职位',
						trigger: 'blur',
					},
				],
				password: [
					{
						min: 6,
						max: 12,
						message: '长度在 6 到 12 个字符',
						trigger: 'blur',
					},
				],
			},
		};
	},
	methods: {
		async getUserList() {
			this.$axios
				.get('admin/users', {
					params: {
						queryInfo: this.queryInfo,
						searchType: this.searchType,
					},
				})
				.then(({ data: res }) => {
					if (res.status !== 200) {
						return this.$message.error('获取用户列表失败');
					}
					this.userList = res.data;
					this.total = res.total + 0;

					this.userList.forEach(async (item) => {
						this.getUserAchievementNum(item.username).then(
							(val) => {
								this.$set(item, 'achivevementNum', val);
							}
						);
					});
				});
		},
		async getUserAchievementNum(username) {
			const { data: res } = await this.$axios.get(
				'/admin/users/achievementNum',
				{
					params: {
						name: username,
					},
				}
			);
			let cacheLength = 0;
			res.data.forEach((item) => {
				if (item.length != 0) {
					cacheLength += item.length;
				}
			});
			// console.log(cacheLength.toString());

			return cacheLength.toString();
		},
		sizeChange(newSize) {
			this.queryInfo.pagesize = newSize;
			this.getUserList();
		},
		currentChange(newPage) {
			this.queryInfo.pagenum = newPage;
			this.getUserList();
		},
		async userStateChange(data) {
			const { data: res } = await this.$axios.get(
				`users/${data.id}/state/${data.mg_state}`
			);
			console.log(res);
			if (res.meta.status !== 200) {
				data.mg_state = !data.mg_state;
				return this.$message.error('用户更新状态失败');
			}
			this.$message.success('用户更新状态成功');
		},
		handleSearchSelectInputChange(val) {
			try {
				this.searchTypeOptions.forEach((item) => {
					if (item.value == val) {
						this.searchTypePlaceholder = `搜索${item.label}`;
						this.searchType = item.value;
						throw new Error('');
					}
				});
			} catch (err) {}
		},
		async searchInputChange(val) {
			this.searchInputKey = '';
			this.searchInputKey += val;
			this.queryInfo.query = this.searchInputKey.trim();
			console.log('searchInputChange');
			console.log(this.searchType, this.searchInputKey);
			this.getUserList();
		},
		// 操作
		handleControlBtnClick(row) {
			this.userMsgEditDialogVisible = !this.userMsgEditDialogVisible;
			this.userMsgEditForm = row;
		},
		handleUserMsgEditFormConfirm() {
			this.$refs.userMsgEditFormRef.validate(async (valid) => {
				if (!valid) return;
				const { data: res } = await this.$axios.post(
					'/admin/users/edit',
					{
						userMsgEditForm: this.userMsgEditForm,
					}
				);
				console.log(res);
				if (res.status !== 200) {
					return this.$message.error('修改失败');
				}
				this.$message.success('修改成功');
				this.userMsgEditDialogVisible = !this.userMsgEditDialogVisible;
			});
		},
	},
	mounted() {},
	computed: {
		...mapState(['moreUserInfo', 'collegeList']),
	},
	created() {
		this.getUserList();
	},
	beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.searchBox {
	display: flex;
	width: 100%;
}
.mask {
	width: 100%;
	height: 82vh;
}
</style>
